<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 核心技术之一 -->
    <title>Position</title><!-- 相对定位、绝对定位、固定定位、粘性定位 -->
    <style>
        
        * {
            box-sizing: border-box;
            margin: 0%;
            padding: 0%;
        }

        /* 滚动动画效果 */
        html {
            scroll-behavior: smooth;
        }

        html,body {
            height: 200%;
            width: 100%;
        }

        .box1 {
            /* 给元素添加相对定位 */
            position: relative;
            top: 50px;
            /* bottom: 50px; */
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: black;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: palegreen;
        }

        .bigbox3 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 50px;
        }

        .box4 {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }

        .box5 {
            width: 50px;
            height: 50px;
            background-color: purple;
        }

        #biggger {
            margin-left: 50px;
            height: 10%;
            width: 20%;
            background-color: antiquewhite;
            position: relative;
        }

        #chuizhijuzhong {
            height: 50px;
            width: 10px;
            background-color: aquamarine;
            position: absolute;
            /* 关键 */
            top: 50%;
            right: 0%;
            margin-top: -25px;
        }

        #niubi {
            height: 50px;
            width: 10px;
            background-color: rgb(127, 255, 170);
            position: absolute;
            top: 50%;
            margin-top: -25px;
        }

        p {
            margin: 20px 0 20px 20px;
        }

        /* <!-- 伪类元素before --> */
        /* 通过 ::before 可以在不污染 HTML 结构的前提下，灵活实现各种视觉效果，是 CSS 布局和装饰的重要工具。 */
        .example::before {
            /* content必须写，否则不显示->content: ''; */
            content: "👉"; /* 插入一个箭头 */
            margin-right: 5px; /* 与文字隔开一点距离 */
        } 
        
        #column {
            position: fixed;
            top: 10px;
            left: 50%;
            margin-left: -100px;
            height: 50px;
            width: 200px;
            background-color: black;
            border-radius: 35px;
        }

        #back {
            position: fixed;
            right: 10px;
            top: 700px;
            height: 30px;
            width: 30px;
            background-color: rgba(45, 42, 42, 0.669);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        a {
            position: absolute;
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .nav {
            position: sticky;
            top: 0;
            width: 400px;
            height: 100px;
            background-color: pink;
            margin: 10px auto;
        }

        #iphone1 {
            position: absolute;
            height: 100px;
            width: 50px;
            background-color: red;
        }

        #iphone1:hover {
            z-index: 4;
        }

        #iphone2 {
            position: absolute;
            height: 100px;
            width: 50px;
            background-color: yellow;
            left: 45px;
        }

        #iphone2:hover {
            z-index: 4;
        }

        #iphone3 {
            position: absolute;
            height: 100px;
            width: 50px;
            background-color: blue;
            left: 70px;
        }

  </style>
</head>
<body>

    <!-- 完美搭配：子绝父相，适用场景广：弹出菜单/下拉框、悬浮效果 -->

    <!-- 相对定位的主要作用就是给绝对定位当"爹"，不脱硫文档流————即是位置还被保留，相对于自身原来的位置来定位，语法：上>下；左>右 -->
    <div class="box1"></div>
    <div class="box2"></div>

    <!-- 绝对定位的核心是脱离文档流（不占据原来空间）并且基于定位基准————寻找距离他最近的已定位父级元素（注意：不是最近的父级元素）进行偏移，语法与relative相同 -->
    <div class="bigbox3">
        <div class="box4">佩奇</div>
        <div class="box5">乔治</div>
    </div>

    <!-- 垂直居中的效果 -->
    <div id="biggger">
        <div id="chuizhijuzhong"></div>
        <div id="niubi"></div>
    </div>

    <p class="example">这是一段文字</p>

    <!-- 固定定位，脱离文档流，且始终相对于视口进行定位，不占据空间，语法同上 -->
    <div id="column"></div>

    <!-- 返回顶部 -->
    <div id="back">
        <a href="#">^</a>
    </div>

    <!-- 粘性定位是一种混合模式，结合了相对定位和固定定位：吸顶效果、表格表头固定；元素滚动到指定位置前为相对定位，之后为固定定位，语法同上 -->
    <!-- 父级元素的overfl必须是visible,如果隐藏的话，定位失效 -->
    <nav class="nav">导航</nav>

    <!-- 层叠顺序-> z-index,生效条件：仅对定位元素生效，默认后来元素层级大于前面的元素 -->
    <main style="width: 100%;height: 100px;display: flex;position: relative;padding-left: 20px;">
        <div id="iphone1"></div>
        <div id="iphone2"></div>
        <div id="iphone3"></div>
    </main>
</body>
</html>